<template>
    <div class="activity">
        <div class="back" @click="back"></div>
        <div class="activity_master">
             <img :src="infor.image">
             <img v-for="(item, index) in infor.content" :key="index" :src="item.image" @click="activity(item.type,item.other_id,item.title,item.link)">
             <img :src="infor.image_title">
        </div>
          <div class="home_list" :style="{background:infor.color}">
               <div class="list_cont" >
                    <div class="list_info" v-for="(item, index) in goods" :key="index">
                        <div v-if="item.type==2"  class="infor_img"  @click="goNews(item.id)">
                            <img :src="item.pict_url">
                        </div>
                        <div v-if="item.type==1"  @click="goDetail(item.id)">
                            <div class="list_img">
                                <img class="ocn_img" :src="item.pict_url">
                            </div>
                            <div class="list_menu">
                                <div class="list_title">{{item.title}}</div>
                                <div class="list_store"><span v-text="item.user_type==0?'淘宝':'天猫'" class="store_type"></span><span class="store_title"> {{item.shop_title}}</span></div>
                                <div class="quan_num">
                                    <span class="quan_info"><span class="num">{{item.coupon_money}} </span> 元券</span>
                                </div>
                                <div class="list_rebate">
                                    <div class="rebate_num">奖 ¥ {{item.reward_price}}</div>
                                    <div class="list_sale">销量{{item.volume}}</div>  
                                </div> 
                                <div class="list_price">
                                        <div class="price_now"><small>¥</small> {{item.coupon_price}} <small>券后</small></div>
                                        <div class="price_old">¥ {{item.zk_final_price}}</div>
                                </div>
                                  
                            </div>
                        </div>    
                    </div>  
                    <div v-if="load" class="loader">正在加载中...</div>  
                    <div v-if="bottom" class="bottom">已经到底啦</div>  
              </div>
          </div> 
          <temp_top></temp_top>                           
    </div>   
</template>

<script>
import  temp_top from './common.vue'
export default {
  name: 'Activity',
  data () {
    return {
        infor:"",
        goods:"",
        load:false,
        bottom:false,
        page:1,
        limit:20,      
    }
  },
  components:{
     "temp_top":temp_top,
  },
  methods:{
	    back(){
            this.$router.go(-1);
        },
        goDetail(e){
            this.$router.push({path:'/detail',query:{id:e}});
        }, 
        goNews(e){
            this.$router.push({path:'/news',query:{id:e}});
        },
        activity(e,f,g,h){
            if(e==1||e==2){
                location.href=h;
            }else if(e==3||e==4){
            this.$router.push({path:'/list',query:{id:f,type:e,title:g}});  
            }else if(e==5||e==6){
                this.$router.push({path:'/detail',query:{id:f}});  
            }else if(e==7){
                this.$router.push({path:'/activity',query:{id:f,title:g}});
            }else if(e==8){
                this.$router.push({path:'/news',query:{id:f}});
            }else if(e==9){
                this.$router.push({path:'/redpocket',query:{title:g}});
            }else{
                Toast("信息有误，请联系客服！");
            }
        },
        scroll(goods) {
            let flag = false;
            window.onscroll = () => {
                let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                let bottomOfWindow =top + vh >= height;
                if(bottomOfWindow&&flag==false){
                    flag=true;
                    this.page++;
                        var that = this;
                        that.load=true;
                        var params = {
                                page: this.page,
                                limit:20,
                        }
                        this.$axios.get( //传参发起请求
                            '/v1/common/itemList', {
                            params
                            }
                        ).then(function (response) { //接口返回数据
                        var data=response.data.data;
                            if(data.length<=0){
                                that.bottom=true;
                                that.load=false;
                            }else{
                                for(var i =0;i<data.length;i++){
                                    goods.push(data[i]);
                                };
                                that.load=false;
                                flag=false;
                            }

                        }, response => {
                            console.log("error");
                        });
                    }
            }
        },        
  },
  created(){
            
    },
    beforeRouteEnter (to, from, next) {
        if ( from.name === 'Detail') {
          to.meta.isUseCache = true;
        } else {
          to.meta.isUseCache = false;
        }
        next()
    },  
     activated() {
        document.title=this.$route.query.title;  
        if(!this.$route.meta.isUseCache){
            var id=this.$route.query.id; 
             this.infor="";
             this.goods="";
             this.load=false;
             this.bottom=false;
             this.page=1;
             this.limit=20;  
            this.$axios.get('/v1/common/activityDetailV1_4',{
                params: {
                    id: id,
                }
            }).then(res => {
                var data=res.data;
                if(data.code==200){
                this.infor=data.data;
                document.title=this.infor.title;
                    if(this.infor.color==""){
                        this.infor.color="#F8F8F8";
                    }
                }else{
                    Toast(data.msg)
                }
            }, res => {
                console.log("error");
            }); 
            this.$axios.get('/v1/common/itemList',{
                params: {
                    limit: 20,
                    page:1,
                }
            }).then(res => {
                var result=res.data;
                if(result.code==200){
                this.goods=result.data;
                this.scroll(this.goods);
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });     
        }
     }            
}
</script>
<style scoped>
.activity{background:#F8F8F8;}
.back{width:60px;height:60px;background: url("/static/images/detail_go_back.png") no-repeat center center;background-size:100% 100%;margin-top:20px;position:absolute;top:20px;left:16px;opacity:0.3;}
.activity_master img{width:100%;display:block;}
.activity_name{font-size:34px;color:#333334;font-weight:bold;line-height:40px;padding-top:60px;}
.title{height:130px;line-height: 130px;text-align: center;}
.title .line {
   display: inline-block;
   width: 100px;
   border-top: 2px solid #F2F2F2;
}
.title .txt {
   color: #F5A623;
   padding:0 28px;
   font-size:36px;
   vertical-align: middle;
}
.info{width:698px;margin:0 auto;background:#FFF;padding-top:8px;border-radius:20px;}
.info_list{display:flex;justify-content: space-between;width:646px;margin:0 auto;margin-top:24px;padding-bottom:36px;}
.info_img img{width:284px;height:284px;border-radius:20px;}
.infor_img{width:100%;height:100%;}
.infor_img img{width:340px;height:100%;border-radius:40px 40px 20px 40px;}
.info_txt{width:336px;height:280px;font-size:28px;color:#9B9B9B;line-height:48px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 6;-webkit-box-orient: vertical;}
.infos{margin-top:24px;}
.hot_goods{width:698px;margin:0 auto;}
.hot_goods img{width:220px;border-radius: 20px;margin-right:19px;}
.hot_goods img:last-child{margin-right:0;}
.home_list{width:100%;padding-top:20px;}
.home_list .super_top{margin-left:26px;}
.home_list .list_cont{width:704px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap: wrap;}
.list_info{width:340px;height:660px;background:#FFF;border-radius:24px;margin-bottom:24px;overflow: hidden;}
.list_info .ocn_img{width:100%;height:340px;}
.list_menu{width:330px;padding:0 0 0 10px;border-radius:32px 32px 24px 40px;background:#FFF;}
.list_title{color:#000000;height:76px;font-size:28px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.list_store{color: #333334;font-size:24px;overflow: hidden;margin:12px 0;height:38px;}
.list_store .store_type{padding:0px 8px;text-align:center;font-size:18px;color:#fff;background:#FF2741;border-radius:4px;margin-right:8px;display: inline-block;}
.list_store .store_title{line-height:40px;margin:12px 0;height:40px;}
.list_rebate{font-size:24px;color:#FE3B30;margin-bottom:20px;display: flex;justify-content: space-between;}
.list_price{display:flex;justify-content:flex-start;height:50px;overflow: hidden;}
.list_price .price_now{font-size:36px;color:#FE3B30;font-weight:bold;max-width:196px;}
.list_price .price_now small{font-size:20px;}
.list_price .price_old{color:#9B9B9B;font-size:20px;text-decoration:line-through;line-height:60px;margin-left:8px;}
.list_sale{font-size:24px;color:#9B9B9B;margin-right:18px;}
.list_quan span{font-size:32px;font-weight:bold;}
.quan_num{margin-bottom:18px;}
.quan_info{padding:2px 8px;background:#FFE514;border-radius:4px;font-size:18px;text-align: center;color:#333334;}
.quan_num span.num{font-size:20px;font-weight:bold;color:#333334;}
.activity a{text-decoration: none;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
</style>

